<!--
 * @Author: zhengxiaoxiao
 * @Date: 2020-06-18 15:38:59
 * @Description: 监查报告
-->
<template>
  <div class="monitor-report">
<!--    <Upload ref="upload" accept=".doc,.docx" :action="action" :headers="header" :format="['doc','docx']"-->
<!--            :on-success="handleSuccess"-->
<!--            :show-upload-list="false" :before-upload="handleBeforeUpload" :on-format-error="handleFormatError">-->
<!--      <Button :loading="loading" class="up-class">上传</Button>-->
<!--      <span>（文件格式为：doc,docx）</span>-->
<!--    </Upload>-->

<!--    <button @click="viewMode">查看</button>-->
<!--    <button @click="editMode">编辑</button>-->

    <div class="office-view" v-if="pageLoading" style="height: 580px">
      <ViewOffice :option="option"></ViewOffice>
    </div>

<!--    <div>foot</div>-->
  </div>
</template>
<script>
// js
import axios from "axios"
// import {GetMonitorReport} from "../../../../api/template"
// import {USER_NAME_SESSION, USER_ID_SESSION} from "../../../../common/storage";
// 组件
import MonitorOffice from "../components/MonitorOffice"
import ViewOffice from "@/components/ViewOffice";

export default {
  components: {
    ViewOffice
  },
  data() {
    return {
      // 上传文件参数
      header: {
        Authorization: `bearer ${sessionStorage.getItem("token")}`,
      },
      action: axios.defaults.baseURL + "/report/document/template",
      file: null,
      loading: false,
      // office配置参数
      option: {
        url: "",
        isEdit: false,
        fileType: "",
        title: ""
      },
      pageLoading: false
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // this.GetMonitorReport();
      this.TestDoc();
      // this.TestXls();
    },
    // 上传文件的格式验证
    handleFormatError(file) {
      this.$Message.warning(file.name + '格式不正确');
      this.loading = false;
    },
    // 上传之前
    handleBeforeUpload(file) {
      this.file = file;
      this.onUpload();
      return false;
    },
    onUpload() {
      this.loading = true;
      let _baseURL = axios.defaults.baseURL;
      this.action = `${_baseURL}/report/document/template`;
      setTimeout(() => {
        this.$refs.upload.post(this.file);
      }, 1000)
    },
    // 导入成功时
    handleSuccess(res) {
      this.loading = false;
      if (res.status) {
        this.$Message.success("上传成功");
        // 这里重新上传文件，only office不会覆盖，所以先刷新解决
        // location.reload();
        this.GetMonitorReport();
      }
    },
    // 获取项目下监察报告模板
    GetMonitorReport() {
      this.pageLoading = false
      // GetMonitorReport().then(res => {
      //   if (res.status) {
      //     let data = res.data;
      //     if (data) {
      //       this.option = {
      //         url: data.fileViewPath,
      //         fileType: data.fileType,
      //         title: "",
      //         isEdit: false,
      //       }
      //     }
      //     this.pageLoading = true
      //   }
      // })
    },
    TestDoc() {
      this.pageLoading = true

      // 注意: onlyoffice 默认禁止访问 来自自签名证书网站的文件路径，需要给onlyoffice的docker容器安装ca证书或者修改config.json
      this.option = {
        // url: "http://119.23.178.118:10051/group1/M00/00/00/rBLdG2Ia7rKACg5vAAAtlzWNheA66.docx",
        url: "https://ywtb.szxf.jfzx.suancloud.cn/fdfs/group1/M00/00/00/rBLdG2IcQDeAawZUAAG2Zlbi8Ow34.docx",
        fileType: "docx",
        title: "test document",
        // key: "Khirz6zTPdfd501",
        key: this.randomWord(false, 15),
        editUrl: "http://119.23.178.118:11000/callback",
        // editUrl: "http://47.115.139.117:9000/callback",
        // editUrl: "http://2b4b-119-130-156-186.ngrok.io/callback",
        isEdit: false,
      }
    },
    TestXls() {
      this.pageLoading = true
      this.option = {
        url: "http://119.23.178.118:8080/static/demo.xlsx",
        fileType: "xlsx",
        title: "test document",
        // key: "Khirz6zTPdfd719",
        key: this.randomWord(false, 15),
        editUrl: "http://47.115.139.117:9000/standard",
        // editUrl: "http://2b4b-119-130-156-186.ngrok.io/callback",
        isEdit: true,
      }
    },
    // 生成随机 15 位 key
    // https://www.cnblogs.com/makan/p/4850071.html
    randomFixedWord () {
      return Math.random().toString(15).substr(2);
    },
    // 另一种方法 生成随机 15 位 key
    randomWord (randomFlag, min, max){
      const arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
      let str = "";
      let range = min;

      // 随机产生
      if(randomFlag){
        range = Math.round(Math.random() * (max-min)) + min;
      }
      for(let i=0; i<range; i++){
        let pos = Math.round(Math.random() * (arr.length-1));
        str += arr[pos];
      }
      return str;
}
  }
}
</script>

<!--<style lang="less" scoped>-->
<!--.monitor-report {-->
<!--  .up-class {-->
<!--    margin-bottom: 10px;-->
<!--  }-->

<!--  .office {-->
<!--    height: 100vh;-->
<!--  }-->
<!--}-->
<!--</style>-->

<style>
  .office-view {
    /*width: 60%;*/
    height: 560px;
  }
</style>
